Compose中的AlertDialog建立
今天要來將過去使用Java、Kotlin建立過的AlertDialog放入JetpackCompose來使用。

AlertDialog

這個功能就是浮動的視窗在這視窗中會有資訊以及按鈕點擊，這是基本的功能。
這邊我就直接帶入程式碼撰寫的部分了。

基礎的撰寫格式

以下是AlertDialog的格式，根據Class中的註解說明，意思如下：

• onDismissRequest：當用戶嘗試透過點擊外部或按後退按鈕關閉對話框時調用。 單擊關閉按鈕時不會呼叫此函數。
• confirmButton：按鈕，用於確認建議的操作，從而解決觸發對話框的問題。 該對話方塊不會為此按鈕設定任何事件，因此它們需要由呼叫者設定。
• modifier：套用於此對話方塊的 [Modifier]。
• dismissButton：按鈕，用於關閉對話框。 該對話方塊不會為此按鈕設定任何事件，因此它們需要由呼叫者設定。
• icon：如果未提供標題，則可選圖示將出現在 [title] 或 [text] 上方。
• title：標題應指定對話框的用途。 標題不是強制性的，因為 [text] 內可能有足夠的資訊。
• text：顯示有關對話方塊目的的詳細資訊的文字。
• shape：定義此對話方塊容器的形狀
• containerColor：用於該對話方塊背景的顏色。可以使用[Color.Transparent]讓其顯示無顏色。
• iconContentColor：用於圖示的內容顏色。
• titleContentColor：用於標題的內容顏色。
• textContentColor：用於文字的內容顏色。
• tonalElevation：當 [containerColor] 為 [ColorScheme.surface] 時，將在容器頂部應用半透明的原色疊加層。 較高的色調高度值將導致淺色主題中顏色較深，深色主題中顏色較淺。
• properties：通常是平台特定的屬性可以進一步配置對話框的設定。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AlertDialog(
    onDismissRequest: () -> Unit,
    confirmButton: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    dismissButton: @Composable (() -> Unit)? = null,
    icon: @Composable (() -> Unit)? = null,
    title: @Composable (() -> Unit)? = null,
    text: @Composable (() -> Unit)? = null,
    shape: Shape = AlertDialogDefaults.shape,
    containerColor: Color = AlertDialogDefaults.containerColor,
    iconContentColor: Color = AlertDialogDefaults.iconContentColor,
    titleContentColor: Color = AlertDialogDefaults.titleContentColor,
    textContentColor: Color = AlertDialogDefaults.textContentColor,
    tonalElevation: Dp = AlertDialogDefaults.TonalElevation,
    properties: DialogProperties = DialogProperties()
) = AlertDialog(onDismissRequest = onDismissRequest, modifier = modifier, properties = properties){
    //...
}

範例撰寫方式

AlertDialog(
    onDismissRequest = { showDialog = false },
    title = { Text(text = "浮動視窗") },
    text = { Text(text = "請選擇一個選項") },
    confirmButton = {
        Button(
            onClick = {
                // 按鈕點擊
                showDialog = false
                Toast.makeText(context, "確定", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .align(Alignment.Center)
                .padding(8.dp)
        ) {
            Text(text = "确定")
        }
    },
    dismissButton = {
        Button(
            onClick = {
                // 按鈕點擊
                showDialog = false
                Toast.makeText(context, "取消", Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .align(Alignment.Center)
                .padding(8.dp)
        ) {
            Text(text = "取消")
        }
    },
    modifier = Modifier
        .align(Alignment.Center)
)

建立AlertDialog的小Demo

這邊的Demo是結合昨天的專案，如果是跟著我一起做的可以直接在以下的程式碼進行複製，若不是跟著我一起做的，下面會說明我建立的步驟。

• 我是在一個建構成整個畫面的Class中建立一個FloatingActionButton來作為菜單選單在畫面的右上方。
• 接著為這個FloatingActionButton的onClick功能中將外部建立的Boolean變數引入並設定參數變換。
• 底下使用if判斷來判斷是否有按下FloatingActionButton改變boolean參數。
• 若有按下FloatingActionButton就會顯示AlertDialog了。

FloatingActionButton啟動AlertDialog的判斷

@Composable
fun GreetingBackground() {
    var showDialog by remember{ mutableStateOf(false)}
    val context = LocalContext.current

    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(MaterialTheme.colorScheme.background)
    ) {
        Column(Modifier.padding(10.dp)) {

            FloatingActionButton(onClick = {
                showDialog = true
               Toast.makeText(context, "FloatingActionButton", Toast.LENGTH_SHORT).show()
            },
                Modifier.align(Alignment.End)){
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null,
                    tint = MaterialTheme.colorScheme.onSecondary
                )
            }
            GreetingMessage(
                greetingMes = "ITHome鐵人賽第15屆_Day16 Compose底部導覽條說明",
                greetName = "Jay"
            )
        }
        //...AlertDialog開啟的判斷
    }
}

AlertDialog

• onDismissRequest上面有說過，就是當我開啟AlertDialog之後，若用戶嘗試點擊AlertDialog對話框以外的空間則會關閉AlertDialog。
• ConfirmButton設定普通Button來放在AlertDialog。
• 當點擊Button點擊後將AlertDialog關閉。

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text(text = "浮動視窗") },
        text = { Text(text = "請選擇一個選項") },
        shape = MaterialTheme.shapes.large,
        confirmButton = {
            Button(
                onClick = {
                    // 處理按鈕點擊判斷
                    showDialog = false
                    Toast.makeText(context, "確定", Toast.LENGTH_SHORT).show()
                },
                modifier = Modifier
                    .align(Alignment.Center)
                    .padding(8.dp)
            ) {
                Text(text = "确定")
            }
        },
        dismissButton = {
            Button(
                onClick = {
                    // 處理按鈕點擊判斷
                    showDialog = false
                    Toast.makeText(context, "取消", Toast.LENGTH_SHORT).show()
                },
                modifier = Modifier
                    .align(Alignment.Center)
                    .padding(8.dp)
            ) {
                Text(text = "取消")
            }
        },
        modifier = Modifier
            .align(Alignment.Center)
    )
}

結果截圖

• 直向開啟AlertDialog
  
• 按下確定或取消
  
• 橫向開啟AlertDialog
  

以上是今天在Compose中建立AlertDialog的步驟與說明。